<template>
  <view class="ver-layout">
    <u-input :disabled="form.detail" v-model="form.title" :custom-style="inputTitleStyle" class="input-title"
             placeholder="请输入标题"></u-input>
    <view class="input-time-layout hor-layout-center">
      <view class="input-time hor-layout-center" @click="form.showTime=true">
        <image class="input-time-icon" :src="ic_todo_clock"></image>
        <view class="input-title-text">{{ form.remind_time ? form.remind_time : '选择时间' }}</view>
      </view>
      <view class="input-time-value">{{ form.remind_time }}</view>
    </view>
    <u-picker v-model="form.showTime" :params="timePara" :default-time="form.remind_time" title="选择开课时间"
              @confirm="selectTime"></u-picker>
    <u-input :disabled="form.detail" v-model="form.description" type="textarea" class="input-content"
             placeholder="请输入内容"></u-input>
    <view v-if="!form.detail" class="save-view ver-layout-center-all">
      <view class="save-btn" @click="saveTodo">
        保存
      </view>
    </view>
  </view>
</template>

<script>
import {todoList} from "@/router.js"
import {TodoApi} from "@/api/askBreak.js"

let ic_todo_clock = require("@/static/home/ic_todo_clock.png"),
    engine = new TodoApi()
export default {
  name: "todoInfo",
  data() {
    return {
      ic_todo_clock,
      inputTitleStyle: {
        fontSize: '24px',
        fontWeight: 'bold',
        color: '#B2B2B2'
      },
      timePara: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: false
      },
      form: {
        title: '',
        description: '',
        remind_time: '',
        showTime: false,
      }
    }
  },
  onLoad(options) {
    let detail = options.flag && options.flag === 'detail'
    if (detail) this.form = {...options, detail}
  },
  methods: {
    selectTime(e) {
      this.form.remind_time = ''
      let {year, month, day, hour, minute, second} = this.timePara
      if (year) this.form.remind_time += e.year;
      if (month) this.form.remind_time += '-' + e.month;
      if (day) this.form.remind_time += '-' + e.day;
      if (hour) this.form.remind_time += ' ' + e.hour;
      if (minute) this.form.remind_time += ':' + e.minute;
      if (second) this.form.remind_time += ':' + e.second;
    },
    saveTodo() {
      let {title, description, remind_time} = this.form, errMsg
      if (!title) errMsg = '请输入备忘标题'
      if (!description) errMsg = '请输入备忘内容'
      if (!remind_time) errMsg = '请选择备忘时间'
      if (errMsg) {
        this.$u.toast(errMsg)
        return
      }
      engine.createTodo(this.form).then(res => {
        this.$u.toast(res.message)
        if (res.code === 200) {
          this.$u.pageCallBackDelay(todoList, 'getTodoList')
          this.$u.routeDelay({type: 'back'})
        }
      })
    }
  }
}
</script>

<style scoped>
.input-title {
  margin: 0px 24px;
  margin-top: 35px;
}

.input-content {
  width: calc(100% - 50px);
  margin: 25px;
}

.input-time-layout {
  margin-left: 25px;
  margin-top: 12px;
}

.input-time {
  padding: 0px 8px;
  width: fit-content;
  height: 23px;
  background: #F1F0F0;
  border-radius: 12px;
  text-align: center;
  line-height: 23px;
}

.input-time-icon {
  width: 12px;
  height: 12px;
  margin-right: 4px;
}

.input-title-text {
  /* 文本样式 */
  font-size: 10px;
  color: #42B4AB;
}

.input-time-value {
  margin-left: 6px;
  line-height: 23px;
  font-size: 10px;
  color: #B2B2B2;
}

.save-view {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 45px;
  border-top: 1px solid #F2F2F2;
}

.save-btn {
  width: 65%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: #42B4AB;
  border-radius: 17px;
  color: white;
}
</style>
